import React from 'react';

const HistoryList = ({ history, onRestore }) => {
    if (history.length === 0) {
        return <div className="history-list empty">暂无历史记录</div>;
    }

    return (
        <div className="history-list">
            <h3>历史记录</h3>
            <ul>
                {history.map((item, index) => (
                    <li key={item.timestamp}>
                        <div className="history-header">
                            <span className="history-type">{item.type}</span>
                            <span className="history-time">
                {new Date(item.timestamp).toLocaleString()}
              </span>
                        </div>

                        <button onClick={() => onRestore(item)}>
                            恢复此请求
                        </button>

                        <div className="history-preview">
                            {item.output.substring(0, 100)}{item.output.length > 100 ? '...' : ''}
                        </div>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default HistoryList;